<template>
    <div class="icons">
        <swiper :options="swiperOption">
            <swiper-slide v-for="(page,index) in pages" :key="index">
                <div class="icon" v-for="item in page" :key="item.id">
                    <div class="icon-img">
                        <img class="icon-img-conente" :src="item.imgUrl" alt="">
                    </div>
                    <p class="icon-desc">{{item.desc}}</p>            
                </div>
            </swiper-slide>
        </swiper>
    </div>
</template>

<script>
export default {
    props:{
        list:Array
    },
    data () {
        return {
            swiperOption:{
                autoplay:false
            }
        }
    },
    computed: {
        pages () {
            const pages = []
            this.list.forEach((item,index)=>{
                const page = Math.floor(index / 8)
                if(!pages[page]) {
                    pages[page] = []
                }
                pages[page].push(item)
            })
            return pages
        }
    }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/varibles.styl'
@import '~@/assets/mixins.styl'
        .icons >>> .swiper-container
            height :0
            padding-bottom:50%
        .icons
            margin-top:.1rem
            .icon 
                position relative
                width: 25%
                height 0
                float :left
                padding-bottom:25%
                .icon-img
                    position:absolute
                    top 0
                    left 0
                    right 0
                    bottom 0.44rem
                    box-sizing:border-box
                    padding 0.1rem
                    .icon-img-conente
                        display block
                        height 100%
                        margin:0 auto 
                .icon-desc
                    position absolute
                    left 0
                    right 0
                    bottom 0
                    height 0.44rem
                    line-height 0.44rem
                    text-align center
                    color $deckBgc
                    ellipsis ()
</style>
